import React from 'react';
import { Card, Tag, Row, Col, Icon, Button } from 'antd';
import { history } from 'umi'
import { renderOptionValue, getUser } from '@/utils/utils';
import { newTabProps } from '@/utils/tab';
import { interviewWayList } from '@/pages/Informal/containers/DiscussArrange';

import { TALK_STATUS, TALK_STATUS_ENUM } from '../../constants';

const ListItem = ({ iconType, text }) => (
    <div style={{ color: 'rgba(0,0,0,0.45)', padding: '10px 0', wordBreak: 'break-all' }}>
        <Icon type={iconType} style={{ marginRight: 4 }} />
        {text}
    </div>
);

export const TopSection = ({ data = {} }) => {
    const { interviewStartTime, interviewEndTime, interviewerEmployeeInfo } = data;
    const timeRange = `${interviewStartTime} ${interviewEndTime.split(' ')?.[1] ?? ''}`;
    const names = interviewerEmployeeInfo.map(item => item.employeeName).join(', ');
    return (
        <Row>
            <Col span={12}>
                <ListItem iconType="clock-circle" text={timeRange} />
            </Col>
            <Col span={12}>
                <ListItem iconType="user" text={names} />
            </Col>
        </Row>
    );
};

export const getTalkLinkHandler = ({ id: arrangeId, interviewRefCode, employeeCode }) => {
    const query = { arrangeId, interviewRefCode, employeeCode };
    const routerProps = {
        ...newTabProps,
        query
    };
    return pathname => {
        history.push({
            pathname,
            ...routerProps
        });
    };
};

const renderButton = ({ id, employeeCode, interviewStatus, interviewRefCode, workFlowUser, interviewUser }) => {
    const query = { id, interviewRefCode, employeeCode };
    const gapStyle = { style: { marginLeft: 12 } };
    const handleClick = getTalkLinkHandler(query);
    const btnMap = {
        [TALK_STATUS_ENUM.PREPARE]: (
            <>
                {interviewUser && (
                    <Button
                        type="primary"
                        onClick={() =>
                            handleClick('/office/personnelManagement/onboardAndLeave/leaveManagement/talk/prepare')
                        }
                    >
                        创建问题
                    </Button>
                )}
            </>
        ),
        [TALK_STATUS_ENUM.DOING]: (
            <>
                {interviewUser && (
                    <Button
                        type="primary"
                        onClick={() =>
                            handleClick('/office/personnelManagement/onboardAndLeave/leaveManagement/talk/record')
                        }
                    >
                        立即记录
                    </Button>
                )}
                {interviewUser && (
                    <Button
                        onClick={() =>
                            handleClick('/office/personnelManagement/onboardAndLeave/leaveManagement/talk/prepare')
                        }
                        {...gapStyle}
                    >
                        修改问题
                    </Button>
                )}
            </>
        ),
        [TALK_STATUS_ENUM.CONCLUSION]: (
            <>
                {workFlowUser && (
                    <Button
                        type="primary"
                        onClick={() =>
                            handleClick('/office/personnelManagement/onboardAndLeave/leaveManagement/talk/conclusion')
                        }
                    >
                        立即总结
                    </Button>
                )}
                <Button
                    onClick={() =>
                        handleClick('/office/personnelManagement/onboardAndLeave/leaveManagement/talk/detail')
                    }
                    {...gapStyle}
                >
                    查看详情
                </Button>
            </>
        )
    };
    return btnMap[interviewStatus] || null;
};

const TalkProcess = ({ data = {}, setVisible, isEdit, title }) => {
    const {
        interviewStatus,
        interviewerEmployeeInfo = [],
        interviewWay,
        interviewLocation = '--',
        videoLink,
        employeeCode,
        id,
        interviewRefCode
    } = data;
    const content = `${renderOptionValue(interviewWayList, interviewWay, 'label')} · ${videoLink || interviewLocation}`; // 类型为视频时字段会变更

    const currentUser = getUser();

    // 审批人
    const workFlowUser = isEdit;

    // 面谈参与人
    const interviewUser = interviewerEmployeeInfo.some(item => item.employeeCode === currentUser.employeeCode);

    // 是审批人且面谈处于特定状态
    const showEditButton =
        workFlowUser && (TALK_STATUS_ENUM.PREPARE === interviewStatus || TALK_STATUS_ENUM.DOING === interviewStatus);

    return (
        <Card
            title={
                <span>
                    {title}<Tag style={{ marginLeft: 6 }}>{renderOptionValue(TALK_STATUS, interviewStatus)}</Tag>
                </span>
            }
            extra={
                showEditButton && (
                    <Button
                        type="link"
                        icon="edit"
                        style={{ color: 'rgba(0,0,0,0.65)' }}
                        onClick={() => {
                            setVisible(true);
                        }}
                    >
                        修改
                    </Button>
                )
            }
            headStyle={{ borderBottom: 0 }}
        >
            <TopSection data={data} />
            <Row>
                <Col span={12}>
                    <ListItem iconType="laptop" text={content} />
                </Col>
            </Row>
            <Row style={{ marginTop: 20 }}>
                {renderButton({ employeeCode, interviewStatus, id, interviewRefCode, workFlowUser, interviewUser })}
            </Row>
        </Card>
    );
};

export default TalkProcess;
